<template>
	<scroll-view class="member-center" scroll-y @touchstart="handleTouchStart" @touchmove="handleTouchMove"
		@touchend="handleTouchEnd">
		<view class="marketplace-rank">
			<view class="header" :style="{ height: bgHeight + 'px' }">
				<div style="height: 88rpx;"></div>
				<text class="title">{{ t('rank.title') }}</text>
			</view>

			<view class="main-tabs">
				<view v-for="tab in mainTabs" :key="tab.id" class="tab-item"
					:class="{ active: activeMainTab === tab.id }" @tap="activeMainTab = tab.id">
					<text class="iconfont" :class="tab.icon"><img :src="tab.iconText" alt="" /></text>
					<text class="tab-text">{{ tab.name }}</text>
				</view>
			</view>

			<scroll-view scroll-x class="sub-tabs" :show-scrollbar="false">
				<view v-for="tab in subTabs" :key="tab.id" class="sub-tab" :class="{ active: activeSubTab === tab.id }"
					@tap="activeSubTab = tab.id">
					{{ tab.name }}
				</view>
			</scroll-view>

			<view class="filters">
				<view class="filter-item" @tap="showCategoryPicker">
					<text>{{ categroyVal ? categroyVal : t('common.placeholder2') }}</text>
					<tn-icon name='down'></tn-icon>
				</view>
				<view class="filter-item right" @tap="showDatePicker">
					<text>{{ choseTime ? choseTime : t('common.placeholder2') }}</text>
					<tn-icon name='down'></tn-icon>
				</view>
			</view>

			<scroll-view scroll-y class="product-list" @scrolltolower="loadMore">
				<view v-for="(product, index) in products" :key="product.id" class="product-item"
					@click="gotoProductDetail(product)">
					<view class="rank-label" :class="`top-${index + 1}`">
						{{ t('common.top') }} {{ index + 1 }}
					</view>

					<view class="product-content">
						<image src="../../static/1.jpg" class="product-image" />
						<view class="product-info">
							<text class="product-title">{{ product.title }}</text>

							<view class="price-section">
								<text class="price">¥{{ product.price }}</text>

							</view>
							<view class="">
								<text class="commission" :class="{ 'high-commission': product.isHighComm }">
									{{ product.isHighComm ? 'High Comm.' : 'Commission' }}
									{{ product.commission }}
								</text>
							</view>

						</view>

					</view>
					<view class="metrics">
						<view class="metric-item">
							<text class="metric-value">{{ product.weekSales }}K</text>
							<text class="metric-label">{{ t('rank.SalesInLastWeek') }}</text>
						</view>
						<view class="metric-item">
							<text class="metric-value">{{ product.dailySales }}K</text>
							<text class="metric-label">{{ t("rank.DailySales") }}</text>
						</view>
						<view class="metric-item">
							<text class="metric-value">{{ product.creators || '--' }}</text>
							<text class="metric-label">{{t("rank.Creators")}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
			<tn-date-time-picker v-model="choseTime" v-model:open="openDateTimePicker"></tn-date-time-picker>
			<uni-popup ref="categoryPopup" type="bottom">
				<view class="picker-content">
					<view class="picker-header">
						<text>{{ t('common.SelectCategory') }}</text>
						<text @tap="closeCategoryPicker">Done</text>
					</view>
					<scroll-view scroll-y class="picker-list">
						<view v-for="category in categories" :key="category.id" class="picker-item"
							@tap="selectCategory(category)">
							{{ category.name }}
						</view>
					</scroll-view>
				</view>
			</uni-popup>
			<tn-action-sheet ref="actionSheetRef"></tn-action-sheet>
		</view>
	</scroll-view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import type { TnActionSheetInstance } from '@tuniao/tnui-vue3-uniapp'
	import {
		useI18n
	} from 'vue-i18n'

	const {
		t
	} = useI18n()
	const actionSheetRef = ref<TnActionSheetInstance>()
	const categroyVal = ref('')
	const choseTime = ref('')
	const actions = [
		{ text: '选项1', value: '1' },
		{ text: '选项2', value: '2' },
		{ text: '选项3', value: '3' },
	]
	const showCategoryPicker = () => {
		actionSheetRef.value?.show({
			actions,
			select: (index : number, value ?: string | number) => {
				console.log('选项被点击', index, value, actions[index])
				categroyVal.value = actions[index].text
				return true
			}
		})
	}
	const mainTabs = [
		{ id: 'product', name: 'Product', icon: 'icon-shop', iconText: '../../static/rank/icon1.png' },
		{ id: 'creator1', name: 'Creator', icon: 'icon-user', iconText: '../../static/rank/icon2.png' },
		{ id: 'creator2', name: 'Creator', icon: 'icon-user', iconText: '../../static/rank/icon3.png' }
	]

	const subTabs = [
		{ id: 'hot', name: 'Hot Sales' },
		{ id: 'potential', name: 'Potential Bestsellers' },
		{ id: 'bestsellers', name: 'Bestsellers in' }
	]

	const activeMainTab = ref('product')
	const activeSubTab = ref('hot')

	const openDateTimePicker = ref(false)
	const dateTimeValue = ref('')
	const showDatePicker = () => {
		openDateTimePicker.value = true
	}
	const products = ref([
		{
			id: '1',
			title: 'ชุดเครื่องเขียนลายการ์ตูน เพ็ค 523w รุ่น (ดินสอ ยางลบ ไม้บรรทัด ก...',
			image: '/static/product1.jpg',
			price: '8.92',
			commission: '10%',
			isHighComm: false,
			weekSales: '15.2',
			dailySales: '3.7',
			creators: null
		},
		{
			id: '2',
			title: 'ชุดเครื่องเขียนลายการ์ตูน เพ็ค 523w รุ่น (ดินสอ ยางลบ ไม้บรรทัด ก...',
			image: '/static/product2.jpg',
			price: '8.92',
			commission: '23%',
			isHighComm: true,
			weekSales: '15.2',
			dailySales: '3.7',
			creators: null
		},
		{
			id: '2',
			title: 'ชุดเครื่องเขียนลายการ์ตูน เพ็ค 523w รุ่น (ดินสอ ยางลบ ไม้บรรทัด ก...',
			image: '/static/product2.jpg',
			price: '8.92',
			commission: '23%',
			isHighComm: true,
			weekSales: '15.2',
			dailySales: '3.7',
			creators: null
		}
	])

	const categoryPopup = ref<any>(null)
	const categories = ref([
		{ id: '1', name: 'Stationery' },
		{ id: '2', name: 'Electronics' },
		{ id: '3', name: 'Fashion' }
	])



	const closeCategoryPicker = () => {
		categoryPopup.value.close()
	}

	const selectCategory = (category : any) => {
		console.log('Selected category:', category)
		closeCategoryPicker()
	}

	const loadMore = () => {
		console.log('Loading more products...')
	}

	const gotoProductDetail = () => {
		uni.navigateTo({
			url: "/pages/productDetail/productDetail"
		})
	}

	const bgHeight = ref(100); // 初始背景高度
	const startY = ref(0)
	const contentMarginTop = ref(0); // 让内容同步向下移动
	// 记录起始触摸点
	const handleTouchStart = (e) => {
		startY.value = e.touches[0].pageY;
	};

	// 计算下拉位移
	const handleTouchMove = (e) => {
		let moveY = e.touches[0].pageY - startY.value;
		// contentMarginTop.value = moveY
		if (moveY > 0) {
			bgHeight.value = Math.min(100 + moveY, 250); // 背景最大高度 450px
			contentMarginTop.value = Math.min(0 + moveY, 150); // 内容同步向下移动
		}
	};

	// 松手后恢复
	const handleTouchEnd = () => {
		const timer = setInterval(() => {
			if (bgHeight.value > 100) {
				bgHeight.value -= 5;
				contentMarginTop.value -= 5;
			} else {
				clearInterval(timer);
			}
		}, 10);
	};
</script>

<style lang="scss">
	.marketplace-rank {
		min-height: 100vh;
		background: #fff;
		background: url("/static/my/bg.png") no-repeat center center / cover;
	}

	.header {
		text-align: center;

		.title {
			margin-top: 40rpx;
			font-size: 18px;
			font-weight: 600;
			color: #333;
			margin-bottom: 80rpx;
		}
	}

	.main-tabs {
		display: flex;
		border-bottom: 1px solid #f0f0f0;
		margin-top: 80rpx;
		background-color: #fff;

		.tab-item {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 8px;
			color: #666;
			height: 100rpx;
			line-height: 100rpx;

			&.active {
				background-color: #ff2c55;
				border-bottom: 2px solid #ff2c55;
				color: white;
			}

			.iconfont {
				font-size: 20px;
			}

			.tab-text {
				font-size: 14px;
			}
		}
	}

	.sub-tabs {
		white-space: nowrap;
		padding: 12px 16px;
		background-color: #fff;

		.sub-tab {
			display: inline-block;
			padding: 8px 16px;
			margin-right: 12px;
			font-size: 14px;
			color: #666;

			&.active {
				color: #ff2c55;
				position: relative;

				&::after {
					content: '';
					position: absolute;
					bottom: -4px;
					left: 0;
					right: 0;
					height: 2px;
					background: #ff2c55;
				}
			}
		}
	}

	.filters {
		display: flex;
		padding: 12px 16px;
		gap: 12px;
		background-color: #fff;

		.filter-item {
			display: flex;
			align-items: center;
			gap: 4px;
			padding: 6px 12px;
			background: #f5f5f5;
			// border-radius: 16px;
			font-size: 14px;
			color: #666;
			border-left: 1px solid #ff2c55;
		}

		.right {
			margin-left: 20rpx;
		}
	}

	.product-list {
		padding: 16px;
	}

	.product-item {
		margin-bottom: 16px;
		background: #fff;
		border-radius: 8px;
		overflow: hidden;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

		.rank-label {
			padding: 8px 16px;
			font-weight: 600;
			font-family: DIN-BlackItalic, DIN-BlackItalic;
			font-weight: 400;
			font-size: 24rpx;
			color: #333333;

			&.top-1 {
				background: linear-gradient(90deg, #FFC760 0%, #FFDEA1 43%, #FFF5E3 100%);
			}

			&.top-2 {
				background: linear-gradient(90deg, #DAC185 0%, #DCD1B7 43%, #FFFFFF 100%);
			}

			&.top-3 {
				background: linear-gradient(90deg, #D5D5D5 0%, #EBEBEB 50%, #FFFFFF 100%);
			}
		}
	}

	.product-content {
		display: flex;
		padding: 12rpx;
		gap: 16px;

		.product-image {
			width: 168rpx;
			height: 168rpx;
			border-radius: 8px;
		}

		.product-info {
			margin-left: 20rpx;
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}
	}

	.product-title {
		font-size: 14px;
		color: #333;
		margin-bottom: 8px;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.price-section {
		display: flex;
		align-items: center;
		gap: 8px;
		margin-bottom: 12px;
		justify-content: space-between;

		.price {
			font-size: 16px;
			font-weight: 600;
			color: #333;
		}

		.commission {
			font-size: 12px;
			color: #666;

			&.high-commission {
				color: #ff2c55;
			}
		}
	}

	.metrics {
		display: flex;
		gap: 16px;
		margin-top: 60rpx;
		margin-bottom: 20rpx;

		.metric-item {
			flex: 1;
			text-align: center;

			.metric-value {
				font-size: 16px;
				font-weight: 600;
				color: #333;
				display: block;
			}

			.metric-label {
				font-size: 12px;
				color: #999;
				margin-top: 4px;
				display: block;
			}
		}
	}

	.picker-content {
		background: #fff;
		border-radius: 16px 16px 0 0;

		.picker-header {
			display: flex;
			justify-content: space-between;
			padding: 16px;
			border-bottom: 1px solid #f0f0f0;

			text {
				font-size: 14px;
				color: #333;

				&:last-child {
					color: #ff2c55;
				}
			}
		}

		.picker-list {
			max-height: 60vh;

			.picker-item {
				padding: 16px;
				font-size: 14px;
				color: #333;
				border-bottom: 1px solid #f0f0f0;

				&:active {
					background: #f5f5f5;
				}
			}
		}
	}
</style>